<template>
  <div class="list">
    <div
      class="list-item"
      v-for="item of data"
      :key="item._id"
      @click="go2detail(item.id)"
    >
      <div class="list-item-img">
        <img v-lazy="getImg(item.images.small)" alt="" />
      </div>
      <div class="list-item-info">
        <h2 class="title">{{ item.title }}</h2>
        <p>
          播放量 <span class="play-total">{{ item.collect_count }}</span>
        </p>
        <p>导演:{{ item.directors[0].name }}</p>
        <p>评分：{{ item.rating.average }}</p>
      </div>
      <div class="list-item-order">
        <van-button class="order-btn" size="mini" type="danger"
          >购票</van-button
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useRouter } from "vue-router";
import getImg from "@/utils/getImg";
export default defineComponent({
  props: ["data"],
  setup() {
    const router = useRouter();
    const go2detail = async (id: number) => {
      router.push({ name: "Detail", params: { id } });
    };
    return { getImg, go2detail };
  },
});
</script>

<style lang='scss' scoped>
.list {
  &-item {
    padding: 10px;
    display: flex;
    height: 115px;
    align-items: center;
    &-img {
      img {
        width: 64px;
        height: 90px;
      }
    }
    &-info {
      margin: 0 20px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      p {
        margin-top: 5px;
      }
      .title {
        margin-bottom: 7px;
        line-height: 24px;
        overflow: hidden;
        font-size: 17px;
        color: #333;
        font-weight: 700;
      }
      .play-total {
        font-weight: 700;
        color: #faaf00;
        font-size: 15px;
      }
    }
    &-order {
      padding: 0 20px;
      .order-btn {
        padding: 10px 10px;
      }
    }
  }
}
</style>
